<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const router = useRouter()
	onReachBottom(() => {
		pageNum.value++
		getJuan()
	})
	let tabList = ref([{
		name: '全部',
	}, {
		name: '领取中',
	}, {
		name: '已结束',
	}])
	let pageNum = ref(1)
	let juanStatus = ref()
	let JuanObj = reactive({
		list: []
	})
	const tabsClick = (e : any) : void => {
		console.log(e);
		pageNum.value = 1
		JuanObj.list = []
		switch (e.index) {
			case 0:
				juanStatus.value = ''
				break;
			case 1:
				juanStatus.value = 0
				break;
			case 2:
				juanStatus.value = 1
				break;
		}
		getJuan()
	}
	const getJuan = () => {
		proxy.$req('GET', proxy.$api.juanList, {
			pageNo: pageNum.value,
			pageSize: 15,
			status: juanStatus.value
		}).then((res) => {
			console.log(res);
			JuanObj.list = JuanObj.list.concat(res.result.records)
		})
	}
	getJuan()
	const createJuan = (id) => {
		uni.$on('refreshJuan', (e) => {
			pageNum.value = 1
			JuanObj.list = []
			getJuan()
			uni.$off('refreshJuan')
		})
		router.push({
			name: 'addJuan',
			params: {
				id,
			}
		})
	}
	const overJuan = (id) => {
		uni.showModal({
			title: '提示',
			content: '确认结束优惠券',
			success: function (res) {
				if (res.confirm) {
					proxy.$req('POST', proxy.$api.editJuan, {
						id,
						status: 1
					}).then((res) => {
						console.log(res);
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						if (res.success) {
							pageNum.value = 1
							JuanObj.list = []
							getJuan()
						}
					})
				} else if (res.cancel) {
				}
			}
		});
	}
</script>
<template>
	<view class="tabs">
		<u-tabs :list="tabList" :activeStyle="{
			width:'200rpx',
			textAlign:'center',
	    color: '#CB645E',
	    fontWeight: 'bold',
	    transform: 'scale(1.05)'
	}" :inactiveStyle="{
		textAlign:'center',
		width:'200rpx',
	    color: '#000',
	    transform: 'scale(1)'
	}" lineColor="#CB645E" @click="tabsClick"></u-tabs>
	</view>
	<view class="juanBox" v-for="(item,index) in JuanObj.list" :key="index">
		<view class="jbTop r-flex-between-center">
			<view class="jbtl c-flex-center-center">
				<text class="intFont" style="font-size: 40rpx;">￥{{ item.subtractionAmount }}</text>
				<text style="font-size: 26rpx;">满{{ item.fullAmount }}可用</text>
			</view>
			<view class="jbtr c-flex-center-start">
				<text style="font-size: 26rpx;font-weight: 600;">{{ item.title }}</text>
				<view class="r-flex-between-start hui" style="margin: 16rpx 0;width: 100%;">
					<text>使用时间</text>
					<view class="c-flex-center-center">
						<text>{{ item.starttime }} 起</text>
						<text>{{ item.endtime }} 止</text>
					</view>
				</view>
				<view class="r-flex-between-start hui" style="margin: 10rpx 0;width: 100%;">
					<text style="font-size: 26rpx;font-weight: 600;">发行量</text>
					<text style="font-size: 26rpx;font-weight: 600;">{{ item.circulationNum }}</text>
				</view>
			</view>
		</view>
		<view class="juanMid r-flex-center-center">
			<view class="jmItem">
				<text>剩余张数 </text>
				<text> {{ (item.circulationNum - item.userNum)>0?item.circulationNum - item.userNum:0 }}</text>
			</view>
			<view class="jmItem">
				<text>累计领取张数 </text>
				<text>{{ item.userNum }}</text>
			</view>
		</view>
		<view class="jmBtm r-flex-around-center" v-if="item.status==0">
			<view class="jbItem r-flex-center-center" @click="overJuan(item.id)">
				<u-icon name="heart" color="#fff"></u-icon>
				<text>结束</text>
			</view>
			<view class="jbItem r-flex-center-center" @click="createJuan(item.id)">
				<u-icon name="heart" color="#fff"></u-icon>
				<text>修改</text>
			</view>
		</view>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="JuanObj.list.length<1">
		<u-empty mode="coupon">
		</u-empty>
	</view>
	<view style="width: 100%;height: 200rpx;"></view>
	<view class="createJuan" @click="createJuan('qx')">
		创建优惠券
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.hui {
		color: #909399;
		font-size: 26rpx;
	}

	.tabs {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
	}

	.juanBox {
		width: 686rpx;
		margin: 32rpx auto 0;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.jbTop {
			width: 100%;
			padding: 10rpx 0;

			.jbtl {
				width: 160rpx;
				height: 100%;
			}

			.jbtr {
				width: 420rpx;
				height: 100%;
			}
		}

		.juanMid {
			width: 100%;
			border-top: 1rpx solid #e7e7e7;
			border-bottom: 1rpx solid #e7e7e7;
			padding: 22rpx 0;

			.jmItem {
				width: 50%;

				text {
					font-size: 26rpx;
				}

				text:nth-child(1) {}

				text:nth-child(2) {
					font-size: 30rpx;
					font-weight: 600;
				}
			}
		}

		.jmBtm {
			margin-top: 16rpx;

			.jbItem {
				width: 300rpx;
				padding-top: 20rpx;
				background-color: #CB645E;
				color: #fff;
				border-radius: 10rpx;
				padding: 16rpx 0;

				text {
					margin-left: 10rpx;
				}
			}
		}
	}

	.createJuan {
		position: fixed;
		bottom: 50rpx;
		width: 686rpx;
		left: 32rpx;
		background-color: #CB645E;
		color: #fff;
		border-radius: 10rpx;
		padding: 32rpx 0;
		text-align: center;
	}
</style>